<template>
    <el-dialog v-model="showDialog" title="上传文件" width="800" @close="close">
        <div class="upload-content" v-loading="loading" :element-loading-text="loadingText">
            <div class="upload-path-row">
                <div class="upload-path-title">当前路径</div>
                <div class="upload-path-value">
                    <el-scrollbar>
                        <span class="upload-path-text">
                            {{uploadPath}}
                        </span>
                    </el-scrollbar>
                </div>
            </div>
            <div class="upload-content-out-row">
                <el-upload ref="uploadRef" v-model:file-list="fileList" class="upload-demo" drag action="#" multiple :beforeUpload="beforeUpload" :auto-upload="false">
                    <el-icon class="el-icon--upload"><UploadFilled /></el-icon>
                    <div class="el-upload__text">
                        拖拽文件至此或点击此处伤处文件
                    </div>
                    <template #tip>
                    </template>
                </el-upload>
            </div>
        </div>
        <template #footer>
            <div class="dialog-footer">
                <el-button @click="doClose" :loading="loading">取消</el-button>
                <el-button type="primary" @click="preSave" :loading="loading">确定</el-button>
            </div>
        </template>
    </el-dialog>
</template>
<script setup lang="ts">
import { ref, watch } from 'vue'
import type { UploadInstance } from 'element-plus'
import { UploadFilled } from '@element-plus/icons-vue'
import { ElMessage } from 'element-plus'

const emits = defineEmits(["close", 'doUpload']);

const props = defineProps({
    show: {
        type: Boolean,
        default: false
    },
    path: {
        type: String,
        default: ""
    }
});
const uploadRef = ref<UploadInstance>()

const uploadPath = ref<string>("")
const showDialog = ref<boolean>(false)
const loading = ref<boolean>(false)
const loadingText = ref<string>("")
const fileList = ref<any[]>()

watch(() => props.show, (value) => {
    if (value !== showDialog.value) {
        showDialog.value = value
    }
    uploadPath.value = props.path
    if (uploadRef.value) {
        uploadRef.value!.clearFiles()
    }
}, {deep: true})

function close() {
    emits("close")
}

function doClose() {
    showDialog.value = false
}
async function beforeUpload(file: any) {
    file.dir = uploadPath.value
    file.per = 0
    emits("doUpload", file)
    return false
}
function preSave() {
    uploadRef.value!.submit()
    doClose()
}
</script>
<style lang="scss" scoped>
.upload-content{
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    .upload-path-row{
        width: 100%;
        height: 40px;
        display: flex;
        align-items: center;
        .upload-path-title{
            width: 70px;
            height: 14px;
            height: 40px;
            line-height: 40px;
        }
        .upload-path-value{
            width: calc(100% - 90px);
            font-size: 14px;
            .upload-path-text{
                height: 40px;
                font-size: 14px;
                line-height: 40px;
            }
        }
    }
    .upload-content-out-row{
        width: 100%;
    }
}
</style>